<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/include/tagLib.jsp" %>
<!doctype html>
<html lang="en">
<head>
    <title>${sieName}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%@include file="/include/cssLib.jsp" %>
    <link rel="stylesheet" href="${ctxStatic }/introjs/introjs.css" />
</head>
<body>
<div class="container-fluid">
    <!-- 菜单 -->
    <tag:nav key="index"/>
    <br>
    <div class="col-md-10 col-md-offset-1 bd-grey">

        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="card card-stats">
                    <div class="card-header" data-background-color="rose">
                        <i class="material-icons">equalizer</i>
                    </div>
                    <div class="card-content">
                        <p class="category">昨日新增问答</p>
                        <h3 class="card-title" id="qaNewTotal"></h3>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="fa fa-clock-o fa-lg"></i> 历史累计 （<span id="qaTotal"></span>）
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="card card-stats">
                    <div class="card-header" data-background-color="green">
                        <i class="material-icons">equalizer</i>
                    </div>
                    <div class="card-content">
                        <p class="category">昨日搜索次数</p>
                        <h3 class="card-title" id="searchNewTotal"></h3>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="fa fa-clock-o fa-lg"></i> 历史累计（<span id="searchTotal"></span>）
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="card card-stats">
                    <div class="card-header" data-background-color="blue">
                        <i class="material-icons">equalizer</i>
                    </div>
                    <div class="card-content">
                        <p class="category">昨日新增词</p>
                        <h3 class="card-title" id="dictWordNewTotal"></h3>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="fa fa-clock-o fa-lg"></i> 累计新增（<span id="dictWordTotal"></span>）
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="card card-chart">
                    <div class="card-header" data-background-color="rose" data-header-animation="true">
                        <div class="ct-chart" id="qaCountChart"></div>
                    </div>
                    <div class="card-content">
                        <h4 class="card-title">Website Views</h4>
                        <p class="category">Last Campaign Performance</p>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="material-icons">access_time</i> campaign sent 2 days ago
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-chart">
                    <div class="card-header" data-background-color="green" data-header-animation="true">
                        <div class="ct-chart" id="searchCountChart"></div>
                    </div>
                    <div class="card-content">
                        <h4 class="card-title">Daily Sales</h4>
                        <p class="category">
                            <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="material-icons">access_time</i> updated 4 minutes ago
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-chart">
                    <div class="card-header" data-background-color="blue" data-header-animation="true">
                        <div class="ct-chart" id="dictWordCountChart"></div>
                    </div>
                    <div class="card-content">
                        <h4 class="card-title">Completed Tasks</h4>
                        <p class="category">Last Campaign Performance</p>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="material-icons">access_time</i> campaign sent 2 days ago
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row hide">
        <div class="col-md-4">
            <div class="card">
                <h4 class="card-header">我的动态 Top 10</h4>
                <div class="card-content scroll-y h-max-400">
                    <ul id="meDynamicList" class="timeline timeline-simple"></ul>
                </div>
                <div class="card-footer">
                    <div class="price">
                        <h4>最近登录：<fmt:formatDate value="${userSessionBean.loginTime}" pattern="yyyy-MM-dd HH:mm:ss" /></h4>
                    </div>
                    <div class="stats pull-right">
                        <p class="category">IP：${userSessionBean.loginIp}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-content">
                    <h4 class="card-title">
                        <a href="#pablo">Office Studio</a>
                    </h4>
                    <div class="card-description">
                        The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the night life in London, UK.
                    </div>
                </div>
                <div class="card-footer">
                    <div class="price">
                        <h4>$1.119/night</h4>
                    </div>
                    <div class="stats pull-right">
                        <p class="category"><i class="material-icons">place</i> London, UK</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-content">
                    <h4 class="card-title">
                        <a href="#pablo">Beautiful Castle</a>
                    </h4>
                    <div class="card-description">
                        The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan.
                    </div>
                </div>
                <div class="card-footer">
                    <div class="price">
                        <h4>$459/night</h4>
                    </div>
                    <div class="stats pull-right">
                        <p class="category"><i class="material-icons">place</i> Milan, Italy</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</div>
<%@include file="/include/sidebarRight.jsp" %>
</body>
<%@include file="/include/scriptLib.jsp" %>
<script src="${ctxStatic }/introjs/intro.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

//        demo.initDashboardPageCharts();

//        //加载动态
//        HttpUtil.ajaxAsyncJsonPost("/adminConsole/sysDynamic/lastList", {top: 10}, function(list){
//            var str = new StringBuffer();
//            var item = null;
//            for(var i=0; i<list.length; i++){
//                item = list[i];
//                str.append('<li class="timeline-inverted">');
//                str.append('<div class="timeline-badge"><i class="fa fa-circle-o text-success"></i></div>');
//                str.append('<div class="timeline-panel">');
//                str.append('<div class="timeline-heading">');
//                str.append('<label>'+DateUtil.formatTime(item.createTime)+'</label>&nbsp;&nbsp;&nbsp;您'+item.subject);
//                str.append('</div></div></li>');
//            }
//            $("#meDynamicList").html(str.toString());
//        });


        //加载统计数
        HttpUtil.ajaxAsyncJsonPost("/adminConsole/index/statNum", {}, function(data){
            log(data);
            $("#qaTotal").text(CommUtil.setDefValue(data.qaTotal, 0));
            $("#qaNewTotal").text(CommUtil.setDefValue(data.qaNewTotal, 0));
            $("#searchNewTotal").text(CommUtil.setDefValue(data.searchNewTotal, 0));
            $("#searchTotal").text(CommUtil.setDefValue(data.searchTotal, 0));
            $("#dictWordNewTotal").text(CommUtil.setDefValue(data.dictWordNewTotal, 0));
            $("#dictWordTotal").text(CommUtil.setDefValue(data.dictWordTotal, 0));
        });

        //加载报表统计
        HttpUtil.ajaxAsyncJsonPost("/adminConsole/index/statReport", {}, function(data){
            log(data);
            loadBarChart('#qaCountChart', 50, data.qaCountReportLabels, data.qaCountReportDatas);
            loadLineChart('#searchCountChart', 50, data.searchCountReportLabels, data.searchCountReportDatas);
            loadLineChart('#dictWordCountChart', 50, data.dictWordCountReportLabels, data.dictWordCountReportDatas);
        });

    });

    function loadLineChart(chartId, maxTotal, labels, data){
        chartData = {
            labels: labels,
            series: [
                data
            ]
        };
        chartSetting = {
            lineSmooth: Chartist.Interpolation.cardinal({tension: 0}),
            low: 0,
            high: maxTotal, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
        }
        var lineChart = new Chartist.Line(chartId, chartData, chartSetting);
        md.startAnimationForLineChart(lineChart);
    }

    function loadBarChart(chartId, maxTotal, labels, data){
        log(labels);
        log(data);
        var chartData = {
            labels: labels,
            series: [
                data
            ]
        };
        var chartSetting = {
            axisX: {
                showGrid: false
            },
            low: 0,
            high: maxTotal,
            chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
        };
        var responsiveOptions = [
            ['screen and (max-width: 640px)', {
                seriesBarDistance: 5,
                axisX: {
                    labelInterpolationFnc: function (value) {
                        return value[0];
                    }
                }
            }]
        ];
        var columnChart = Chartist.Bar(chartId, chartData, chartSetting, responsiveOptions);
        md.startAnimationForBarChart(columnChart);
    }

</script>

</html>